<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">供应商详情</p>
    </div>
    <div class="view-container">
      <el-row class="status-title">
        <el-col class="mr20 width100" v-if="detailData.approveStatus == 0">
            <el-button
                class="btn-default width100"
                type="primary"
                @click="audit()"
                v-hasPermi="['system:supplierInfo:check']"
            >审核</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.approveStatus == 1">
            <el-button
                class="btn-audit width100"
                type="primary"
                @click="reverseAudit()"
                v-hasPermi="['system:supplierInfo:check']"
            >反审核</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.approveStatus == 4 || detailData.approveStatus == 3 || detailData.approveStatus == 2">
            <el-button
                class="btn-default width100"
                type="primary"
                @click="edit()"
                v-hasPermi="['system:supplierInfo:edit']"
            >编辑</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.status == 2 && detailData.approveStatus == 1">
            <el-button
                class="btn-enable width100"
                type="primary"
                @click="enable()"
                v-hasPermi="['system:supplierInfo:enable']"
            >启用</el-button>
        </el-col>
        <el-col class="mr20 width100" v-if="detailData.status == 1 && detailData.approveStatus == 1">
            <el-button
                class="btn-delete width100"
                type="primary"
                @click="disable()"
                v-hasPermi="['system:supplierInfo:enable']"
            >禁用</el-button>
        </el-col>
        <el-col :span="10" class="status-container">
          <div class="status-item">
            <span :class="{ 'active' : detailData.approveStatus == 0 }">待审核</span>
            <span :class="{ 'active' : detailData.approveStatus == 1 }">已审核</span>
            <span :class="{ 'active' : detailData.approveStatus == 2 }">反审核</span>
            <span :class="{ 'active' : detailData.approveStatus == 3 }">拒绝</span>
          </div>
        </el-col>
      </el-row>
      <ul class="tabs mt30">
        <li @click="current = 0" :class="{ active: current === 0 }">基础资料</li>
        <li @click="current = 1" :class="{ active: current === 1 }">证件资料</li>
        <li @click="current = 2" :class="{ active: current === 2 }">发票地址</li>
      </ul>
      <div v-show="current === 0">
        <el-row class="detail-item">
          <el-col :span="8">
              <span>供应商编码：</span>{{ detailData.supCode ?  detailData.supCode : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>供应商名称：</span>{{ detailData.name ?  detailData.name : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>供应商简称：</span>{{ detailData.shortName ?  detailData.shortName : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>外文名称：</span>{{ detailData.englishName ?  detailData.englishName : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>供应商助记码：</span>{{ detailData.mnemonicCode ?  detailData.mnemonicCode : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>法人：</span>{{ detailData.legalPerson ?  detailData.legalPerson : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>供应商分类：</span>{{ detailData.sortId ?  detailData.sortId : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>供应商类型：</span>{{ detailData.supType == '0' ? '代理商' : detailData.supType == '1' ? '生产商' : '承运商' }}
          </el-col>
          <el-col :span="8" v-if="detailData.supType == '0'">
              <span>生产商：</span>{{ detailData.typeLink }}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
              <span>联系人：</span>{{ detailData.contact ?  detailData.contact : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>联系电话：</span>{{ detailData.contactTel ?  detailData.contactTel : '暂无'}}
          </el-col>
          <el-col :span="8">
            <span>营业执照编号：</span>{{ detailData.businessLicense ?  detailData.businessLicense : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
            <span>邮政编码：</span>{{ detailData.zipCode ?  detailData.zipCode : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>电子邮件：</span>{{ detailData.email ?  detailData.email : '暂无'}}
          </el-col>
          <el-col :span="8">
              <span>网址：</span>{{ detailData.url ?  detailData.url : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="24">
            <span>公司注册地址：</span>{{ detailData.province ? detailData.province : '暂无' }}{{ detailData.city ? detailData.city : '' }}{{ detailData.zone ? detailData.zone : '' }}{{ detailData.address ? detailData.address : '' }}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="8">
            <span>备注：</span>{{ detailData.remark ?  detailData.remark : '暂无'}}
          </el-col>
          <el-col :span="8">
            <span>状态：</span>
            <!-- {{ detailData.status == '0' ? '暂无' : detailData.status == '1' ? '正常' : '禁用'}} -->
            <font v-if="detailData.status == 2" style="color:#fd562c">禁用</font>
            <font v-if="detailData.status == 1" style="color:#52C41A">正常</font>
          </el-col>
          <el-col :span="8">
            <span>审核状态：</span>
            <!-- {{ detailData.approveStatus == '0' ? '待审核' : detailData.approveStatus == '1' ? '已审核' : detailData.approveStatus == '3' ? '拒绝' : detailData.approveStatus == '2' ? '反审核' : '草稿' }} -->
            <font v-if="detailData.approveStatus == 0" style="color:#13C2C2">待审核</font>
            <font v-if="detailData.approveStatus == 1" style="color:#52C41A">已审核</font>
            <font v-if="detailData.approveStatus == 2" style="color:#fd562c">反审核</font>
            <font v-if="detailData.approveStatus == 3" style="color:#fd562c">拒绝</font>
          </el-col>
        </el-row>
      </div>
      <div v-show="current === 1">
        <el-row class="display">
          <el-col :span="8" class="display">
            <div class="upload-title">营业执照</div>
            <div class="avatar-uploader">
              <div v-if="typeList11">
                <img v-if="typeList11.fileType == '.jpg' || typeList11.fileType == '.png' || typeList11.fileType == '.gif' || typeList11.fileType == '.bmp' || typeList11.fileType == 'jpeg'" :src="typeList11.fileUrl" class="avatar">
                <span v-else>{{ typeList11.fileName }}</span>
              </div>
              <p v-else>暂无</p>
            </div>
          </el-col>
          <el-col :span="8">
            开始日期：<span>{{ typeList11.startTime ? typeList11.startTime : '暂无' }}</span>
          </el-col>
          <el-col :span="8">
            结束日期：<span>{{ typeList11.endTime ? typeList11.endTime : '暂无' }}</span>
          </el-col>
        </el-row>
        <el-row class="display">
          <el-col :span="8" class="display">
            <div class="upload-title">医疗器械法规要求<br />(安全性证明文件)</div>
            <div class="avatar-uploader">
              <div v-if="typeList1">
                <img v-if="typeList1.fileType == '.jpg' || typeList1.fileType == '.png' || typeList1.fileType == '.gif' || typeList1.fileType == '.bmp' || typeList1.fileType == 'jpeg'" :src="typeList1.fileUrl" class="avatar">
                <span v-else>{{ typeList1.fileName }}</span>
              </div>
              <p v-else>暂无</p>
            </div>
          </el-col>
          <el-col :span="8">
            开始日期：<span>{{ typeList1.startTime ? typeList1.startTime : '暂无' }}</span>
          </el-col>
          <el-col :span="8">
            结束日期：<span>{{ typeList1.endTime ? typeList1.endTime : '暂无' }}</span>
          </el-col>
        </el-row>
        <el-row class="display">
          <el-col :span="8" class="display">
            <div class="upload-title">医疗器械法规要求<br />(生产环境证明文件)</div>
            <div class="avatar-uploader">
              <div v-if="typeList2">
                <img v-if="typeList2.fileType == '.jpg' || typeList2.fileType == '.png' || typeList2.fileType == '.gif' || typeList2.fileType == '.bmp' || typeList2.fileType == 'jpeg'" :src="typeList2.fileUrl" class="avatar">
                <span v-else>{{ typeList2.fileName }}</span>
              </div>
              <p v-else>暂无</p>
            </div>
          </el-col>
          <el-col :span="8">
            开始日期：<span>{{ typeList2.startTime ? typeList2.startTime : '暂无' }}</span>
          </el-col>
          <el-col :span="8">
            结束日期：<span>{{ typeList2.endTime ? typeList2.endTime : '暂无' }}</span>
          </el-col>
        </el-row>
        <el-row class="display">
          <el-col :span="8" class="display">
            <div class="upload-title">进口原料检疫报告</div>
            <div class="avatar-uploader">
              <div v-if="typeList3">
                <img v-if="typeList3.fileType == '.jpg' || typeList3.fileType == '.png' || typeList3.fileType == '.gif' || typeList3.fileType == '.bmp' || typeList3.fileType == 'jpeg'" :src="typeList3.fileUrl" class="avatar">
                <span v-else>{{ typeList3.fileName }}</span>
              </div>
              <p v-else>暂无</p>
            </div>
          </el-col>
          <el-col :span="8">
            开始日期：<span>{{ typeList3.startTime ? typeList3.startTime : '暂无' }}</span>
          </el-col>
          <el-col :span="8">
            结束日期：<span>{{ typeList3.endTime ? typeList3.endTime : '暂无' }}</span>
          </el-col>
        </el-row>
        <el-row class="display">
          <el-col :span="8" class="display">
            <div class="upload-title">产品质量标准</div>
            <div class="avatar-uploader">
              <div v-if="typeList4">
                <img v-if="typeList4.fileType == '.jpg' || typeList4.fileType == '.png' || typeList4.fileType == '.gif' || typeList4.fileType == '.bmp' || typeList4.fileType == 'jpeg'" :src="typeList4.fileUrl" class="avatar">
                <span v-else>{{ typeList4.fileName }}</span>
              </div>
              <p v-else>暂无</p>
            </div>
          </el-col>
          <el-col :span="8">
            开始日期：<span>{{ typeList4.startTime ? typeList4.startTime : '暂无' }}</span>
          </el-col>
          <el-col :span="8">
            结束日期：<span>{{ typeList4.endTime ? typeList4.endTime : '暂无' }}</span>
          </el-col>
        </el-row>
        <el-row class="display">
          <el-col :span="8" class="display">
            <div class="upload-title">执照电子档</div>
            <div class="avatar-uploader">
              <div v-if="typeList5">
                <img v-if="typeList5.fileType == '.jpg' || typeList5.fileType == '.png' || typeList5.fileType == '.gif' || typeList5.fileType == '.bmp' || typeList5.fileType == 'jpeg'" :src="typeList5.fileUrl" class="avatar">
                <span v-else>{{ typeList5.fileName }}</span>
              </div>
              <p v-else>暂无</p>
            </div>
          </el-col>
          <el-col :span="8">
            开始日期：<span>{{ typeList5.startTime ? typeList5.startTime : '暂无' }}</span>
          </el-col>
          <el-col :span="8">
            结束日期：<span>{{ typeList5.endTime ? typeList5.endTime : '暂无' }}</span>
          </el-col>
        </el-row>
        <el-row class="display">
          <el-col :span="8" class="display">
            <div class="upload-title">供方调查表</div>
            <div class="avatar-uploader">
              <div v-if="typeList6">
                <img v-if="typeList6.fileType == '.jpg' || typeList6.fileType == '.png' || typeList6.fileType == '.gif' || typeList6.fileType == '.bmp' || typeList6.fileType == 'jpeg'" :src="typeList6.fileUrl" class="avatar">
                <span v-else>{{ typeList6.fileName }}</span>
              </div>
              <p v-else>暂无</p>
            </div>
          </el-col>
          <el-col :span="8">
            开始日期：<span>{{ typeList6.startTime ? typeList6.startTime : '暂无' }}</span>
          </el-col>
          <el-col :span="8">
            结束日期：<span>{{ typeList6.endTime ? typeList6.endTime : '暂无' }}</span>
          </el-col>
        </el-row>
        <el-row class="display">
          <el-col :span="8" class="display">
            <div class="upload-title">生产许可证</div>
            <div class="avatar-uploader">
              <div v-if="typeList7">
                <img v-if="typeList7.fileType == '.jpg' || typeList7.fileType == '.png' || typeList7.fileType == '.gif' || typeList7.fileType == '.bmp' || typeList7.fileType == 'jpeg'" :src="typeList7.fileUrl" class="avatar">
                <span v-else>{{ typeList7.fileName }}</span>
              </div>
              <p v-else>暂无</p>
            </div>
          </el-col>
          <el-col :span="8">
            开始日期：<span>{{ typeList7.startTime ? typeList7.startTime : '暂无' }}</span>
          </el-col>
          <el-col :span="8">
            结束日期：<span>{{ typeList7.endTime ? typeList7.endTime : '暂无' }}</span>
          </el-col>
        </el-row>
        <el-row class="display">
          <el-col :span="8" class="display">
            <div class="upload-title">产品授权书</div>
            <div class="avatar-uploader">
              <div v-if="typeList8">
                <img v-if="typeList8.fileType == '.jpg' || typeList8.fileType == '.png' || typeList8.fileType == '.gif' || typeList8.fileType == '.bmp' || typeList8.fileType == 'jpeg'" :src="typeList8.fileUrl" class="avatar">
                <span v-else>{{ typeList8.fileName }}</span>
              </div>
              <p v-else>暂无</p>
            </div>
          </el-col>
          <el-col :span="8">
            开始日期：<span>{{ typeList8.startTime ? typeList8.startTime : '暂无' }}</span>
          </el-col>
          <el-col :span="8">
            结束日期：<span>{{ typeList8.endTime ? typeList8.endTime : '暂无' }}</span>
          </el-col>
        </el-row>
        <el-row class="display">
          <el-col :span="8" class="display">
            <div class="upload-title">质量认证体系证书</div>
            <div class="avatar-uploader">
              <div v-if="typeList9">
                <img v-if="typeList9.fileType == '.jpg' || typeList9.fileType == '.png' || typeList9.fileType == '.gif' || typeList9.fileType == '.bmp' || typeList9.fileType == 'jpeg'" :src="typeList9.fileUrl" class="avatar">
                <span v-else>{{ typeList9.fileName }}</span>
              </div>
              <p v-else>暂无</p>
            </div>
          </el-col>
          <el-col :span="8">
            开始日期：<span>{{ typeList9.startTime ? typeList9.startTime : '暂无' }}</span>
          </el-col>
          <el-col :span="8">
            结束日期：<span>{{ typeList9.endTime ? typeList9.endTime : '暂无' }}</span>
          </el-col>
        </el-row>
        <el-row class="display">
          <el-col :span="8" class="display">
            <div class="upload-title">产品的工艺流程图</div>
            <div class="avatar-uploader">
              <div v-if="typeList10">
                <img v-if="typeList10.fileType == '.jpg' || typeList10.fileType == '.png' || typeList10.fileType == '.gif' || typeList10.fileType == '.bmp' || typeList10.fileType == 'jpeg'" :src="typeList10.fileUrl" class="avatar">
                <span v-else>{{ typeList10.fileName }}</span>
              </div>
              <p v-else>暂无</p>
            </div>
          </el-col>
          <el-col :span="8">
            开始日期：<span>{{ typeList10.startTime ? typeList10.startTime : '暂无' }}</span>
          </el-col>
          <el-col :span="8">
            结束日期：<span>{{ typeList10.endTime ? typeList10.endTime : '暂无' }}</span>
          </el-col>
        </el-row>
      </div>
      <div v-show="current === 2">
         <el-row class="detail-item">
          <el-col :span="8">
            <span>公司名称（中文）：</span>{{ shareInvoice.companyName ?  shareInvoice.companyName : '暂无'}}
          </el-col>
          <el-col :span="8">
            <span>公司名称（英文）：</span>{{ shareInvoice.companyEnName ?  shareInvoice.companyEnName : '暂无'}}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="24">
            <span>公司注册地址：</span>{{ shareInvoice.addressCountry ?  shareInvoice.addressCountry : '暂无'}}{{ shareInvoice.addressProvince ? shareInvoice.addressProvince : '' }}{{ shareInvoice.addressCity ? shareInvoice.addressCity : '' }}{{ shareInvoice.addressRegion ? shareInvoice.addressRegion : '' }}{{ shareInvoice.addressDetailed ? shareInvoice.addressDetailed : '' }}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="24">
            <span>纳税人类型：</span>{{ shareInvoice.taxpayerType == '0' ? '增值税一般纳税人' : shareInvoice.taxpayerType == '1' ? '增值税小规模纳税人' : shareInvoice.taxpayerType == '2' ? '营业纳税人' : '暂无' }}
          </el-col>
        </el-row>
        <el-row class="detail-item">
          <el-col :span="24">
            <span>纳税类型比例：</span>{{ shareInvoice.taxpayerScale == '0' ? '13%' : shareInvoice.taxpayerScale == '1' ? '9%' : shareInvoice.taxpayerScale == '2' ? '6%' : shareInvoice.taxpayerScale == '3' ? '3%' : shareInvoice.taxpayerScale == '4' ? '1%' : '暂无'}}
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 审核 -->
    <el-dialog :visible.sync="open" width="500" top="100px" append-to-body title="审核意见" center>
      <el-row>
        <el-col :span="24">
          <textarea
            class="approve-textarea"
            v-model="approveRemark"
            type="textarea"
            placeholder="请输入意见和看法"
          >
          </textarea>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="btn-success mr20 width100"
          @click="agreeApprove()"
        >同意</el-button>
        <el-button
          type="primary"
          class="btn-cancel width100"
          @click="disagreeApprove()"
        >拒绝</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detailSupplier, approveSupplier, enableSupplier } from "@/api/system/basedata/supplier/supplier"
import { listSupplierlist } from "@/api/system/basedata/supplierlist/supplierlist"
export default {
  name: "supplierDetail",
  data(){
    return {
      id: '',
      detailData: '',
      shareInvoice: '',
      fileList: [],
      current: 0,
      open: false,
      approveRemark: '',
      typeList1: {},
      typeList2: {},
      typeList3: {},
      typeList4: {},
      typeList5: {},
      typeList6: {},
      typeList7: {},
      typeList8: {},
      typeList9: {},
      typeList10: {},
      typeList11: {},
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getDetailData()
  },
  methods: {
    // 获取详情信息
    getDetailData() {
      detailSupplier(this.id).then(res => {
        this.detailData = res.data
        this.fileList = res.data.fileList == null ? [] : res.data.fileList
        this.shareInvoice = res.data.shareInvoice == null ? '' : res.data.shareInvoice
        this.getDetailUpload()
        this.getSupplierlist()
      })
    },
    // 转换上传图片
    getDetailUpload(){
      let arr1 = this.fileList.find((item) => {
          return item.type == 'SUP002'
      })
      let arr2 = this.fileList.find((item) => {
          return item.type == 'SUP003'
      })
      let arr3 = this.fileList.find((item) => {
          return item.type == 'SUP004'
      })
      let arr4 = this.fileList.find((item) => {
          return item.type == 'SUP005'
      })
      let arr5 = this.fileList.find((item) => {
          return item.type == 'SUP006'
      })
      let arr6 = this.fileList.find((item) => {
          return item.type == 'SUP007'
      })
      let arr7 = this.fileList.find((item) => {
          return item.type == 'SUP008'
      })
      let arr8 = this.fileList.find((item) => {
          return item.type == 'SUP009'
      })
      let arr9 = this.fileList.find((item) => {
          return item.type == 'SUP010'
      })
      let arr10 = this.fileList.find((item) => {
          return item.type == 'SUP011'
      })
      let arr11 = this.fileList.find((item) => {
          return item.type == 'SUP001'
      })
      this.typeList1 = arr1 == undefined ? '' : arr1
      this.typeList2 = arr2 == undefined ? '' : arr2
      this.typeList3 = arr3 == undefined ? '' : arr3
      this.typeList4 = arr4 == undefined ? '' : arr4
      this.typeList5 = arr5 == undefined ? '' : arr5
      this.typeList6 = arr6 == undefined ? '' : arr6
      this.typeList7 = arr7 == undefined ? '' : arr7
      this.typeList8 = arr8 == undefined ? '' : arr8
      this.typeList9 = arr9 == undefined ? '' : arr9
      this.typeList10 = arr10 == undefined ? '' : arr10
      this.typeList11 = arr11 == undefined ? '' : arr11
    },
    // 获取销售区域
    getSupplierlist(){
      listSupplierlist().then(res => {
        let arr = res.rows.find(item =>{
          return item.id == this.detailData.sortId
        })
        if(arr != undefined){
          this.detailData.sortId = arr.sortName
        }
      })
    },
    // 审核
    audit(){
      this.open = true
    },
    // 反审核
    reverseAudit(){
      this.$modal.confirm('是否确认反审核？', '反审核').then(() => {
        approveSupplier(this.id, 2, 0).then(res => {
          // console.log(res)
          if(res.code == 200){
            this.getDetailData()
            this.$modal.msgSuccess("操作成功")
          }
        })
      }).catch(() => {})
    },
    agreeApprove(){
        approveSupplier(this.id, 1, 1,this.approveRemark).then(res => {
            // console.log(res)
            if(res.code == 200){
                this.getDetailData()
                this.open = false
                this.$modal.msgSuccess("操作成功")
            }
        })
    },
    disagreeApprove(){
        approveSupplier(this.id, 3, 0, this.approveRemark).then(res => {
            if(res.code == 200){
                this.getDetailData()
                this.open = false
                this.$modal.msgSuccess("操作成功")
            }
        })
    },
    // 编辑
    edit(){
      this.$tab.closeOpenPage({ path: "/basedata/supplier/edit", query:{id: this.id} })
    },
    // 启用
    enable(){
      this.$modal.confirm('是否确认启用？', '启用').then(() => {
        enableSupplier(this.id, 1).then(res => {
          if(res.code == 200){
            this.$modal.msgSuccess("启用成功")
            this.getDetailData()
          }
        })
      }).catch(() => {})
    },
    // 禁用
    disable(){
      this.$modal.confirm('是否确认禁用？', '禁用').then(() => {
        enableSupplier(this.id, 2).then(res => {
          if(res.code == 200){
            this.$modal.msgSuccess("禁用成功")
            this.getDetailData()
          }
        })
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.upload-title{
  width: 140px;
  padding-right: 10px;
  color: #606266;
  font-size: 14px;
  font-weight: bold;
  text-align: right;
}
.avatar-uploader{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  width: 178px;
  height: 178px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  overflow: hidden;
}
.avatar {
  width: 178px;
  display: block;
}
</style>